Foco perdido
La revisión de foco perdido verifica que quien navega con teclado siempre pueda saber dónde está en la página. Cuando alguien pulsa Enter, Espacio u otra tecla de activación sobre un botón, un enlace o un checkbox, el indicador de foco del navegador debe quedarse sobre un elemento visible y con sentido.
Si el foco desaparece —aterriza en algo oculto, salta al principio de la página o se esfuma por completo— quien usa teclado o lector de pantalla pierde su ubicación. Esta revisión reporta cada control donde eso ocurre.
Criterio WCAG: 2.4.3 Orden del foco (Nivel AA)
Por qué importa
Perder el foco desorienta de una forma difícil de apreciar cuando se usa ratón. El usuario pulsó un botón, algo pasó, y ahora el resaltado no está. No hay manera de saber dónde va a caer el siguiente Tab — muchas veces significa volver a empezar desde el principio de la página.
Cómo se comporta la revisión
La herramienta visita cada control interactivo de la página y, para cada uno:
- Se desplaza hasta él y confirma que está visible.
- Pulsa la tecla a la que ese control debería responder.
- Espera a que la página se estabilice.
- Comprueba si un elemento visible sigue teniendo el foco.
- Restaura la página a su estado original antes de continuar.
Después, una segunda pasada se ocupa de los controles que solo existen después de abrir algo. Algunos botones revelan controles ocultos al activarse — un botón Menú que abre un panel de navegación con un botón Cerrar, por ejemplo. Esos no se pueden encontrar en la página inicial, así que la herramienta activa cada botón visible que quedaba, compara qué botones hay en pantalla antes y después, y prueba los que aparecieron. También comprueba si el propio botón que disparó la acción pierde el foco, algo que ocurre con casos como un botón de reproducir vídeo que se oculta al pulsarlo.
Teclas que se prueban por tipo de control
| Control | Teclas |
|---|---|
| Botón | Enter, Espacio |
Enlace dentro de la misma página (#, javascript:) | Enter |
| Checkbox | Espacio |
| Radio button | Espacio |
| Desplegable | Enter, Espacio |
Botón personalizado (role="button") | Enter, Espacio |
Checkbox personalizado (role="checkbox") | Espacio |
Qué cubre la revisión
| Control | Notas |
|---|---|
| Botones | Controles pulsables estándar |
| Enlaces dentro de la misma página | Enlaces que no llevan fuera de la página |
| Checkboxes y radio buttons | Controles de formulario |
| Controles ARIA personalizados | Widgets que usan role="button", role="checkbox" y similares |
| Controles revelados en capas | Botones de cerrar o descartar dentro de menús y modales |
Qué omite, y por qué
| Se omite | Motivo |
|---|---|
| Enlaces externos | Llevan fuera de la página — eso es lo esperado |
<main> o role="main" | Recibir el foco aquí es el comportamiento correcto de un skip link |
| Controles deshabilitados | No se pueden activar |
| Elementos invisibles | No se puede interactuar con ellos |
| Diálogos nativos | Capturan el foco por diseño |
Falsos positivos habituales
| Escenario | Por qué no es un problema real |
|---|---|
Un skip link mueve el foco a <main> | Excluido explícitamente — para eso sirve un skip link |
Un ancla que apunta a un #id válido | Permitido |
| Un botón abre una alerta del navegador | No es medible en la página |
| Un botón abre un diálogo nativo | Se detecta y se omite |
| Un enlace externo pierde el foco | Comportamiento esperado |
Cómo verificarlo a mano
- Tabula hasta el control en cuestión.
- Pulsa Enter o Espacio.
- Mira dónde está ahora el contorno de foco. Si no hay nada resaltado en pantalla, o el resaltado está sobre algo que no puedes ver, eso es una pérdida de foco.
Referencia WCAG
Criterio de conformidad 2.4.3 Orden del foco (Nivel A)